<template>
    <view >
      <view class="goods_list_item" >
        <view class="left_img">
          <radio :checked="goods.goods_state" @click="checkedChangeFn" v-if="showRadio" color="#C00000"></radio>
          <image :src="goods.goods_small_logo || imgdefsrc" mode=""></image>
        </view>
        <view class="right_text">
          <text>{{goods.goods_name}}</text>
          <view class="right_con">
            <text class="red">
                ${{goods.goods_price | toFix}}
            </text>
            <uni-number-box :min="1" :max="9" v-if="showNum" @change="numChangeFn" :value="goods.goods_count"></uni-number-box>
          </view>
        </view>
      </view>
    </view>
    
</template>

<script>
  export default {
    name:"my-goodslist",
    props:{
      // 列表组件的数据对象
      goods: {
        type:Object,
        default:{}
      },
      // 是否显示单选框的布尔值
      showRadio:{
        type:Boolean,
        default:false
      },
      // 是否显示加减组件
      showNum:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        // 图片失效默认地址
        imgdefsrc: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
      };
    },
    filters:{
      toFix(val){
       return Number(val).toFixed(2)
      }
    },
    methods:{
      // 改变商品选中状态事件
      checkedChangeFn(){
        this.$emit('CheckedChangeFn',{
          goods_id:this.goods.goods_id,
          goods_state:!this.goods.goods_state
        })
      },
      // num盒子组件内值发生改变事件
      numChangeFn(val){
        this.$emit('NumChangeFn',{
          goods_id: this.goods.goods_id,
          goods_count: +val
        })
      }
    }
  }
</script>

<style lang="scss">
      .goods_list_item {
        display: flex;
        border-bottom: 1px solid #CCCCCC;
        .left_img {
          display: flex;
          justify-content: space-between;
          align-items: center;
          image {
            width: 100px;
            height: 100px;
            margin-right: 10px;
          }
        }
        .right_text {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 12px;
          padding: 3px 0;
          .right_con {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .red {
                color: #C00000;
              }
            
          }
        }
      }
  
</style>
